

<template>
  <div class="app-container">
    <div class="SearchTop accountInfo">

      <el-form :model="form" ref="infoRef" :rules="rules" :inline="true">
        <h1>基础资料</h1>
        <el-row>
          <el-col :span="12">
            <el-form-item label="租户名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="简称" prop="shortName">
              <el-input v-model="form.shortName" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="租户类型" prop="type">
              <el-select v-model="form.type" placeholder="租户类型" clearable>
                <el-option v-for="dict in tenant_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input v-model="form.contactPhone" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="经营地址">
              <areaItem @outValue="getAreaCode" ref="areaClear" :areaCode="areaCode" :isDisabled="readOnly"></areaItem>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="详细地址" class="address">
              <el-input v-model="form.address" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="域名" :title="form.hostName">
              <el-input v-model="form.hostName" placeholder="请输入" clearable :disabled="readOnly" />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="企业logo">
              <imageUpload ref="upload" v-model="form.photo" :limit="limit" :isShowTip='true' :fileSize="0.3"
                :isdisabled="isDisabled" @UploadSuccess="UploadSuccess" @RemoveSuccess="RemoveSuccess"
                @isChange="isChange" />
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="信息介绍" class="describe">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入" show-word-limit maxlength="1000" />
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <el-row>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import areaItem from "../../areaItem";
import { uploadCommon } from '@/mixins/ImageUploadMixin'
import { gettenantInfo, editSelf } from '@/api/tenant/tenant'
const { proxy } = getCurrentInstance();
const { tenant_type } = proxy.useDict("tenant_type");
const limit = ref(1);
const isDisabled = ref(false)
const areaCode = ref("");
const readOnly = ref(true)
const { UploadSuccess, RemoveSuccess, submit, formList, isChange } = uploadCommon.setup()
const data = reactive({
  form: {

  },
  rules: {
    name: [{ required: true, message: "租户名称不能为空", trigger: "blur" }, {
      max: 20, message: '租户名称不能超过20个字符', trigger: 'blur'
    }],
    shortName: [{ required: true, message: "简称不能为空", trigger: "blur" }, {
      max: 6, message: '简称不能超过6个字符', trigger: 'blur'
    }],
    type: [{ required: true, message: "租户类型不能为空", trigger: "blur" }],
  },

});
const { form, rules } = toRefs(data);
function getAreaCode(code) {
  form.value.areaCode = code;
}
//
//console.log('5555', store.getters)
function getInfo() {
  gettenantInfo().then(res => {
    if (res.code == 200) {
      if(res.data==null){return}
      form.value = res.data;
      form.value.type = res.data.type + "";
      areaCode.value = res.data.areaCode;
      formList.value = res.data.photo;
      //  console.log('回显的图', formList.value)
    }
  })
}
//提交
function submitForm() {
  proxy.$refs['infoRef'].validate(valid => {
    if (valid) {
      submit(formList => {
        form.value.photo = formList
        console.log('修改的图片', form.value.photo)
        editSelf(form.value).then(res => {
          proxy.$modal.msgSuccess("提交成功");
          //
          if (res.code == 200) {

            setTimeout(() => {
              location.reload()
            }, 1000)
          }
        })
      })
    } else {
      proxy.$modal.msgError("提交失败！");
      return false;
    }
  })
}
getInfo()
</script>
<style lang="scss">
.accountInfo {
  background: #fff;
  margin-top: 2px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 0px 0px 4px 0px rgba(160, 170, 199, 0.1);
  padding: 20px 32px;

  .el-row {
    margin-left: 40px;

    button.el-button {
      margin-top: 20px;
    }

    label.el-form-item__label {
      min-width: 70px;
    }



    .describe {
      .el-form-item__content {
        width: 500px;

        textarea.el-textarea__inner {
          background: #EFF0F1;
          height: 64px;
          resize: none;
        }

      }
    }
  }

  h1 {
    font-size: 16px;
    color: rgb(17, 146, 254);
    line-height: 40px;
    font-weight: bold;
    padding: 10px 0;
  }
}

.el-form-item.address input.el-input__inner {
  width: 744px !important;
}
</style>
